<template>
  <div>
    <div class="sp-cont-table-title">
      <div class="sp-table-title_le">
        <span>投保人信息</span>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-cont-tablepage">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#cccccc' }"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date1" label="客户号码" align="center">
        </el-table-column>
        <el-table-column prop="date2" label="客户姓名" align="center">
        </el-table-column>
        <el-table-column prop="date3" label="与主被保人姓名" align="center">
        </el-table-column>
        <el-table-column prop="date4" label="证件类型" align="center">
        </el-table-column>
        <el-table-column prop="date5" label="证件号码" align="center">
        </el-table-column>
        <el-table-column prop="date6" label="是否长期" align="center">
        </el-table-column>
        <el-table-column prop="date7" label="证件类型是否有效" align="center">
        </el-table-column>
        <el-table-column prop="date8" label="生日" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div class="sp-operation">
              <div @click="deleter(scope.row)">
                <span style="color: red; cursor: pointer">操作</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  <div class="sp-cont-dialog">
      <div class="sp-cont-dialog-name">
        <span>投保人信息</span>
      </div>
        <div class="sp-cont-dialog-add_a" >
        <div class="sp-cont-dialog-add_aicon"><span>+</span></div>
        <div class="sp-cont-dialog-add_aname">
          <span>添加第二投保人</span>
        </div>
      </div>
      <div class="sp-table-title_ri">^</div>
    </div>
    <div class="sp-from-box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="活动名称" prop="name">
              <div class="sp-from-bton" v-on:dblclick="dialogVisible = true">
                <span>双击选择</span>
              </div>
              <span style="font-size: 12px">首次投保客户无需填写客户号</span>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="与主投保人关系：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="00-本人" value="shanghai"></el-option>
                <el-option label="01-夫妻" value="beijing"></el-option>
                 <el-option label="03-儿女" value="shanghai"></el-option>
                <el-option label="04-父母" value="beijing"></el-option>
                <el-option label="06-岳父" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm"></div>
        </div>
        <div
          style="
            width: 100%;
            height: 1px;
            background: #cccccc;
            margin-top: -30px;
            margin-bottom: 30px;
          "
        ></div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件类型：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                 <el-option label="0-身份证" value="shanghai"></el-option>
                <el-option label="1-护照" value="beijing"></el-option>
                 <el-option label="2-军认证" value="shanghai"></el-option>
                <el-option label="3-异常身份证" value="beijing"></el-option>
                <el-option label="4-户口本" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件号码：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件有效期：" prop="name">
              <el-date-picker
                v-model="ruleForm.time"
                type="datetimerange"
                format="yyyy-MM-dd"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件地址：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm"></div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="性别：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="0-男" value="shanghai"></el-option>
                <el-option label="1-女" value="beijing"></el-option>
                <el-option label="2-不详" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
         <div class="sp-from-cont-cloumm">
            <el-form-item label="yyyy-MM-dd：">
              <el-date-picker
                type="date"
                placeholder="出生日期"
                v-model="ruleForm.date1"
                style="width: 100%"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="年龄：" prop="name">
              <el-input
                v-model="ruleForm.name"
                disabled
                placeholder="默认值"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="身高：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="体重：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="国籍：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="CHN-中国" value="shanghai"></el-option>
                <el-option label="CAN-加拿大" value="beijing"></el-option>
                 <el-option label="FRA-法国" value="shanghai"></el-option>
                <el-option label="GBR-英国" value="beijing"></el-option>
                  <el-option label="USA-美国" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="职业代码：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="1020101-国家权力机关及其工作机构负责人" value="shanghai"></el-option>
                <el-option label="2120201-文字编辑" value="beijing"></el-option>
                <el-option label="4050405-医务人员" value="beijing"></el-option>
                <el-option label="6240103-出租车，救护车司机" value="beijing"></el-option>
                 <el-option label="2040101-飞行驾驶员" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="职业类别：" prop="name">
              <el-input
                v-model="ruleForm.name"
                disabled
                placeholder="默认值"
              ></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="兼职：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="教育程度：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="0-博士" value="shanghai"></el-option>
                <el-option label="1-硕士" value="beijing"></el-option>
                <el-option label="2-本科" value="beijing"></el-option>
                <el-option label="3-大专" value="beijing"></el-option>
                <el-option label="4-中专/高中" value="beijing"></el-option>
               <el-option label="5-初中" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="婚姻状况：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="0-未婚" value="shanghai"></el-option>
                <el-option label="1-已婚" value="beijing"></el-option>
                <el-option label="2-丧偶" value="shanghai"></el-option>
                <el-option label="3-离异" value="beijing"></el-option>
                <el-option label="4-其他" value="shanghai"></el-option>
              
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="户口类型：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="选项一" value="shanghai"></el-option>
                <el-option label="选项二" value="beijing"></el-option>
                  <el-option label="选项三" value="shanghai"></el-option>
                <el-option label="选项四" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="移动电话：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="住宅电话：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="办公电话：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件类型：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件类型：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="证件类型：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="个人微信：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="电子邮箱：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="邮编：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="现住地址：" prop="name">
              <div style="display: flex">
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
                -
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
                -
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
                -
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
           <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="单位/学校名称：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="工作内容：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="现住地址：" prop="name">
              <div style="display: flex">
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
                -
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
                -
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
                -
                <div style="width: 20%; margin: 0px 10px">
                  <el-input v-model="ruleForm.name"></el-input>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="收入来源：" prop="name">
              <el-checkbox-group v-model="ruleForm.type">
                <el-checkbox label="工资" name="type"></el-checkbox>
                <el-checkbox label="房屋出租" name="type"></el-checkbox>
                <el-checkbox label="个体经营" name="type"></el-checkbox>
                <el-checkbox label="农业收入" name="type"></el-checkbox>
                <el-checkbox label="其他" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
        <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="税收居民身份：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="年收入：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="家挺收入：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
        </div>
         <div class="sp-from-cont">
            <div class="sp-from-cont-cloumm">
            <el-form-item label="姓：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="名：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="保单申请日期：">
              <el-date-picker
                type="date"
                placeholder="出生日期"
                v-model="ruleForm.date1"
                style="width: 100%"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </div>
           </div>
             <div class="sp-from-cont">
            <div class="sp-from-cont-cloumm">
            <el-form-item label="现居地址(国家)：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="现居地址(省)：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="现居地址(市)：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
             </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="现居地址(详细)：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
            <div class="sp-from-cont">
            <div class="sp-from-cont-cloumm">
            <el-form-item label="税收居民国/地区1：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="纳税人识别号1：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="税收居民国/地区2：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
             </div>
               <div class="sp-from-cont">
            <div class="sp-from-cont-cloumm">
            <el-form-item label="纳税人识别号2：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="税收居民国/地区3：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="纳税人识别号3：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
         </div>
            <div class="sp-from-cont">
          <div class="sp-from-cont-cloumm">
            <el-form-item label="不能提供税收居民国/地区纳税人识别号原因：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="1-居民国（地区）不发放纳税人识别号" value="shanghai"></el-option>
                <el-option label="2-账户持有人未能取得纳税识别号，如选此项-请解释具体原因" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="年收入：" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="sp-from-cont-cloumm">
            <el-form-item label="签名人身份：" prop="name">
              <el-select v-model="ruleForm.name" placeholder="请选择">
                <el-option label="本人" value="shanghai"></el-option>
                <el-option label="代理人" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

      </el-form>
    </div>
    <div class="sp-flooter">
      <div class="sp-flooter_le">
        <div class="sp-flooter_le-bton">
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>签名核对</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>问题件录入</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>错误字段标记</span>
            </div>
          </div>
          <div class="sp-flooter-bton_cloumm">
            <div class="sp-flooter_botten">
              <span>投保人相似客户校验</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sp-flooter_ri">
        <div class="sp-flooter_ri-bton">
          <div class="sp-flooter_ri-margin">
            <div style="width: 100px; height: 50px; float: left">
              <!-- 占位 -->
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>修改</span>
            </div>
            <div class="sp-flooter_botten bottenMargin" @click="tonext()">
              <span>下一步</span>
            </div>
          </div>
          <div>
            <div style="width: 100px; height: 50px; float: left">
              <!-- 占位 -->
            </div>
            <div class="sp-flooter_botten bottenMargin">
              <span>未通过的投保查询</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {

  data() {
    return {
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
      },
    };
  },
  methods: {
    tonext() {
      this.$emit("tonext", "index1");
    },
    typename() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
</style>